@extends('layouts.base')

@section('title', '货道模板')

@section('admin-style')
<link rel="stylesheet" href="{{ asset('assets\element-ui\lib\theme-chalk\index.css') }}">
<!-- import Vue before Element -->
<script src="{{ asset('assets\vue\vue.js')}}"></script>

<!-- import JavaScript -->
<script src="{{ asset('assets\element-ui\lib\index.js') }}"></script>
<script src="{{ asset('assets\axios\axios.min.js') }}"></script>
@stop

@section('content')

<!-- ============================================================== -->
<!-- Container fluid  -->
<!-- ============================================================== -->
<div class="container-fluid">
  <!-- ============================================================== -->
  <!-- Bread crumb and right sidebar toggle -->
  <!-- ============================================================== -->
  <div class="row page-titles">
      <div class="col-md-5 align-self-center">
          <h3 class="text-themecolor">货道模板--列表</h3>
      </div>
      <div class="col-md-7 align-self-center">
          <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
              <li class="breadcrumb-item">货道模板管理</li>
              <li class="breadcrumb-item active">货道模板列表</li>
          </ol>
      </div>
  </div>
  <!-- ============================================================== -->
  <!-- End Bread crumb and right sidebar toggle -->
  <!-- ============================================================== -->

  <!-- ============================================================== -->
  <!-- Start Page Content -->
  <!-- ============================================================== -->
  <div class="row">
      <div class="col-12">
          <div class="card">
              <div class="card-body">
                  <h4 class="card-title">货道列表</h4>
                  <h6 class="card-subtitle"></h6>
                  <div class="card-body">
                      {{-- <form method="get" action="{{ route('admin.freightWayDemos.config',$id) }}">
                          <div class="form-row">
                              <div class="col-md-3 mb-3">
                                <label for="validationDefault04">编号</label>
                                <input type="text" name="No" class="form-control" id="validationDefault04" placeholder="编号" value="{{ $query['No'] }}" >
                              </div>
                          </div>
                          <button class="btn btn-primary" type="submit">筛选</button>
                          <a href="{{ route('admin.freightWayDemos.config', $id) }}" class="btn btn-info">重置</a>
                      </form>  --}}
                      <a class="btn btn-info float-right" @click="changeFreight" href="javascript:;"><i title='编辑' class='fas fa-edit'></i> 批量编辑</a>
                    </div>        
                  <div class="table-responsive">
                      <table id="demo-foo-addrow" class="table table-bordered m-t-30 table-hover contact-list" data-paging="true" data-paging-size="7">
                          <thead>
                              <tr>
                                  <th>ID</th>
                                  <th>编号</th>
                                  <th>容量</th>
                                  <th>状态</th>
                                  <th>类型</th>                                
                                  <th>创建时间</th>
                              </tr>
                          </thead>
                          <tbody>
                            @foreach($freightWayDemoData as $value)
                              <tr>
                                  <td>{{ $value->id }}</td>
                                  <td>{{ $value->No }}</td>
                                  <td>{{ $value->capacity }}</td>
                                  <td><span class="label label-{{  freight_state_class($value->state) }}">{{ freight_state($value->state) }}</span></td> 
                                  <td>{{ freight_type($value->type) }}</td>          
                                  <td>{{ $value->created_at }}</td>
                              </tr>
                              @endforeach
                          </tbody>
                      </table>
                      {{-- {{ $freightWayDemoData->appends($query)->links() }} --}}
                  </div>
              </div>
              {{-- 批量编辑 --}}
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
                <el-form ref="freightForm" :rules="freightRules" :model="freightForm" label-width="80px">
                  <el-form-item label="货道编号">
                    <el-input-number :step="1" step-strictly :min="0" controls-position="right" v-model="freightForm.start" placeholder="开始" style="width: 27%;"></el-input-number>--<el-input-number :step="1" step-strictly :min="0" :max="{{ $freight_num }}" controls-position="right" placeholder="结束" v-model="freightForm.end" style="width: 27%;"></el-input-number>
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      style="width: 56%;"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入单个货道号,使用/隔开,例如1/2/3/4"
                      v-model="freightForm.singles">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="容量">
                    <el-input-number v-if="freightForm.edit_capacity" :step="1" step-strictly :min="1" v-model="freightForm.capacity" style="width: 56%;"></el-input-number>
                    <el-checkbox v-model="freightForm.edit_capacity"></el-checkbox>
                  </el-form-item>
                <el-form-item label="状态">
                  <el-select v-if="freightForm.edit_state" v-model="freightForm.state" placeholder="选择状态">
                    <el-option label="未启用" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="开路异常" value="2"></el-option>
                    <el-option label="短路异常" value="3"></el-option>
                  </el-select>
                  <el-checkbox v-model="freightForm.edit_state"></el-checkbox>
                </el-form-item>
                <el-form-item label="货道类型">
                  <el-select v-if="freightForm.edit_type" v-model="freightForm.type" placeholder="请选择电机类型">
                    <el-option label="三线电机" value="1"></el-option>
                    <el-option label="电磁锁" value="2"></el-option>
                    <el-option label="二线电机" value="3"></el-option>
                    <el-option label="带反馈电磁锁" value="4"></el-option>
                    <el-option label="履带" value="5"></el-option>
                    <el-option label="蛇形货道" value="6"></el-option>
                    <el-option label="特殊" value="7"></el-option>
                  </el-select>
                  <el-checkbox v-model="freightForm.edit_type"></el-checkbox>
                </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose">取 消</el-button>
                  <el-button type="primary" @click="onSubmit">确 定</el-button>
                </span>
              </el-dialog>
          </div>
      </div>
  </div>
</div>         
                        
@stop

@section('admin-js')
  <script type="text/javascript">   
    Vue.prototype.$axios = axios;
    Vue.prototype.$dcopy = function($arr){
        return JSON.parse(JSON.stringify($arr));
    }
    function del(){
      swal({
        title: "您确定要删除吗?",
        icon: "warning",
        buttons: ['取消', '确定'],
        dangerMode: true,
      })
      .then((willDelete) => {
        if (willDelete) {         
          $('#deleteForm').submit();
        } else {
          
        }
      });
      
    } 
    var my_vue = new Vue({
            el: '#app',
            data: function(){
               return {
                  dialogVisible: false,
                  freightForm: {
                    start:'',
                    end:'',
                    singles:'',
                    capacity: '',
                    type: '1',
                    state: '0',
                    freight_way_demo_id: '{{ $id }}'
                  },
                  freightRules:{
                    start: [
                      {required: true, message: '请输入货道号', 'trigger': 'blur'},                      
                    ],
                    end: [
                      {required: true, message: '请输入货道号', 'trigger': 'blur'},                      
                    ],
                    singles: [
                      {required: true, message: '请输入货道号', 'trigger': 'blur'},                      
                    ]
                  }
               } 
            },
            mounted:function(){
            },
            created:function(){

            },
            methods: {
                changeFreight: function(){
                  this.dialogVisible = true;
                  this.freightForm = {
                      start:'',
                      end:'',
                      singles:'',
                      capacity: '',
                      type: '1',
                      state: '0',
                      freight_way_demo_id: '{{ $id }}',
                      edit_capacity:false,
                      edit_type:false,
                      edit_state:false,
                    }
                },
                handleClose: function(done) {
                  this.$confirm('确认关闭？')
                    .then(_ => {
                      this.dialogVisible = false;
                      location.href = "{{ route('admin.freightWayDemos.config', $id) }}"
                      done();
                    })
                    .catch(_ => {});
                },
                onSubmit: function(){
                  var that = this;
                  if(that.freightForm.start != '' && that.freightForm.end != ''){
                    if(Number(that.freightForm.start) >= Number(that.freightForm.end)){
                      that.$message.error('开始货道必须小于结束货道');
                      return;
                    }                    
                  }else if( that.freightForm.singles != ''){
                    
                  }else{
                    that.$message.error('请填写货道号');
                    return ;
                  }
                  axios.post("{{ route('admin.freightWayDemoDatas.update')}}", that.freightForm)
                  .then(res => {                    
                    let data = res.data.data;
                    that.dialogVisible = false;
                    if(data.msg.fail != 0){ 
                      that.$message.error('失败个数' + data.msg.fail + '失败货道号:' + data.msg.failNo);
                      that.freightForm.singles = data.msg.failNo;
                    }
                    location.href = "{{ route('admin.freightWayDemos.config', $id) }}"
                  });
                }
            }
        }); 
    
  </script>

@stop